<template>
   <a-card>
           <a-form-model style="width: 700px;" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
               <a-form-model-item required label="分类名">
                   <a-input v-model="data.name"/>
               </a-form-model-item>
               <a-form-model-item label="父分类">
                   <a-cascader
                           :options="options"
                           :load-data="loadData"
                           placeholder="请选择"
                           change-on-select
                           v-model="data.pid"
                           expandTrigger="hover"
                   />
               </a-form-model-item>
               <a-form-model-item label="分类排序">
                   <a-input-number :min="1" :max="255" v-model="data.sort"/>
               </a-form-model-item>
               <a-form-model-item :wrapper-col="{span:14, offset: 4}">
                   <a-button type="primary" @click="save">
                       保存
                   </a-button>
               </a-form-model-item>
           </a-form-model>
   </a-card>
</template>

<script>
    export default {
        name: "edit_category",
        data(){
            return {
                data:{
                    pid: [""],
                    name:"",
                    sort: 1
                },
                options:[
                    {label: "顶级分类", value: "", isLeaf: true}
                ]
            }
        },
        methods:{
            async save(){
                var d = this.$clone(this.data)
                if(d.pid.length && d.pid[0] !== ""){
                    d.pid = d.pid[d.pid.length - 1]
                } else {
                    d.pid = ""
                }
                await this.$post("/api/admin/category/save", d)
            },
            async loadData(selectedOptions) {
                const targetOption = selectedOptions[selectedOptions.length - 1];
                targetOption.loading = true;
                var r = await this.$get("/api/admin/category/getChildrenByPid", {id: targetOption.value})
                console.log("fuck is", r, targetOption)
                targetOption.loading = false
                if(!r.length){
                    targetOption.isLeaf = true
                } else {
                    targetOption.children = r.map(e => {
                        return{
                            label: e.name,
                            value: e.id,
                            isLeaf: false
                        }
                    })
                }
                this.options = [...this.options]
                // load options lazily
                // setTimeout(() => {
                //     targetOption.loading = false;
                //     targetOption.children = [
                //         {
                //             label: `${targetOption.label} Dynamic 1`,
                //             value: 'dynamic1',
                //         },
                //         {
                //             label: `${targetOption.label} Dynamic 2`,
                //             value: 'dynamic2',
                //         },
                //     ];
                //     this.options = [...this.options];
                // }, 1000);
            },

        },
        async mounted() {
            var r = await this.$get("/api/admin/category/getChildrenByPid")
            r = r.map(e => {
                return {
                    label: e.name,
                    value: e.id,
                    isLeaf: false
                }
            })
            this.options = [...this.options, ...r]
        }
    }
</script>

<style scoped>

</style>